<template>
	<div class="app-container">
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="id" label="用户ID" align="center" />
			<el-table-column prop="nickName" label="用户昵称" align="center" />
			<el-table-column prop="phone" label="手机号" align="center" />
			<el-table-column prop="complete" label="完成任务总数" align="center" />
			<el-table-column prop="freezeDeposits" label="当前余额" align="center" />
			<el-table-column prop="teamSum" label="团队总数" align="center" />
			<el-table-column prop="wxAccount" label="微信账号" align="center" />
			<el-table-column prop="paymentCode" label="收款码" align="center">
				<template slot-scope="scope">
					<el-link type="primary" @click="handleView(scope.row)">查看</el-link>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" />
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<el-dialog :visible.sync="dialogVisible" title="用户二维码" width="300px" @close="dialogVisible = false">
			<div style="text-align: center">
				<img v-if="qrCodeImg" :src="qrCodeImg" :alt="qrCodeValue" style="width: 200px; height: 200px" />
				<div style="margin-top: 10px; word-break: break-all">{{ qrCodeValue }}</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import QRCode from 'qrcode';
import { listUser, listTaskUser } from '@/api/system/user';

export default {
	name: 'User',
	data() {
		return {
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			tableData: [],
			dialogVisible: false,
			qrCodeValue: '',
			qrCodeImg: ''
		};
	},
	created() {
		this.getList();
	},
	methods: {
		async getList() {
			try {
				const res = await listTaskUser(this.queryParams);
				// 这里假设后端返回的数据结构为 { rows: [...] }
				this.tableData = res.rows || [];
				this.total = res.total;
			} catch (e) {
				this.$message.error('获取用户列表失败');
			}
		},
		async handleView(row) {
			if (row.paymentCode) {
				// 生成二维码图片
				this.qrCodeImg = row.paymentCode;
				this.dialogVisible = true;
			} else {
				this.$message.error('该用户未上传收款码');
			}
		}
	}
};
</script>

<style scoped>
.app-container {
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
}
</style>
